# Codesign

`window.__REACT_DEVTOOLS_GLOBAL_HOOK__`

https://github.com/facebook/react/tree/master/packages/react-devtools-inline

https://github.com/bruderstein/react-render-hook

https://github.com/vercel/next.js/tree/canary/examples/with-polyfills/client

Now can't run if React Devtools Extension is installed due to this issue:
https://github.com/bruderstein/react-render-hook/issues/4

But can run in incognito mode

https://github.com/ctrlplusb/react-tree-walker

No need for react-render-hook or devtools! Can get line, source file info from event.\_targetInst.

Babel generate seems to remove new lines, so may need a different parser - CST? https://github.com/cst/cst

Maybe try plain old regex and split. No need for babel anymore, just convert file to an array using split('/n')

Need to build tree now. Should be able to do it with `sibling`.

Good info on fiber https://programmer.help/blogs/rootfiber-for-react-source-parsing.html

Utilities to get fiberNodes without onClick - https://github.com/bendtherules/react-fiber-traverse. Should be able to build a proper component tree with this library.

Great article describing how Fiber works and why it is a singly linked list tree traversal algorithm.
https://indepth.dev/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-to-walk-the-components-tree/

```
# FiberNode
event._targetInst = {
  elementType: 'div',
  child: FiberNode (child),
  index: number,
  return: FiberNode (parent),
  sibling: FiberNode (sibling),
  stateNode: HTMLElement,
  type: 'div',
  _debugOwner: FiberNode (parent component)
  _debugSource: {
    columnNumber: number,
    fileName: 'path/to/component',
    lineNumber: number,
  }
}
```

https://johno.com/jsx-as-a-design-tool-data-structure/

Good article on jsx manipulation
https://johno.com/add-a-prop-to-jsx-elements-with-babel/

# Blog Post Ideas

- Shape of React Fiber nodes
- ClassName [].join(' ')
